允许用户储存路径，简化了 canvas 绘制代码，并提升了速度。可以有三种方式创建 Path2D 对象：
new Path2D(); // 空的 Path2D
/new Path2D(path); // 复制的 Path2D
new Path2D(d);// 通过 SVG path 字符串创建 Path2D
在 Path2D 中可以使用 Canvas 创建样式。
var circle = new Path2D();
circle.arc(50, 50, 50, 0, 2 * Math.PI);
ctx.stroke(circle);
在 canvas 实际绘制路径时，提供一个可选的 Path2D 路径
ctx.fill(path);
ctx.stroke(path);
ctx.clip(path);
ctx.isPointInPath(path);
ctx.isPointInStroke(path);
点击区域（ hit regions ）需要设置 canvas.hitregions.enabled=true 来进行测试。
CanvasRenderingContext2D.addHitRegion();
CanvasRenderingContext2D.removeHitRegion();
CanvasRenderingContext2D.clearHitRegions();
addHitRegion() 方法在现有的一个路径中或是一个 2D 路径中天界一个点击区域。 MouseEvent 接口有一个扩展的 region 属性，用户可以用来检查鼠标是否点击了该区域。
drawFocusNeed(element) 可以无需属性切换自动支持。如果在 <canvas> 元素中提供的回退元素获得焦点，用户可以使用这个 API 在 canvas 中心绘制一个焦点环。
如果回退元素获得焦点（如切换到一个包含 canvas 的页面），该元素在 canvas 中的像素表示/形成可以绘制一个焦点环来代替当前焦点。
使用 Path2D 可以绘制直线、矩形、圆形、椭圆以及曲线。
| path.moveTo(x,y) | 将光标移动到指定坐标点 |
| path.lineTo(x,y) | 在当前坐标与参数中指定的直线终点之间绘制一条直线 |
| path.rect(x,y,height) | 绘制矩形 |
| path.arc(x,y,startAngle,EndAngle,anticlockwise) | 绘制圆形货弧形 |
| path.ellipse(x,y,radiusX,radiusY,rotation,startAngle,endAngle,anticlockwise) | 绘制椭圆或椭圆形圆弧 |
| path.arcTo(x1,y1,x2,y2,radius) | 绘制圆形曲线或圆弧曲线 |
| path.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y) | 绘制北维塞曲线 |
| path.quadraticCurveTo(cpx,cpy,x,y) | 绘制二次样条曲线 |
| path.closPath() | 关闭路径 |
可以使用图形上下文对象的 fill() 方法填充使用 Path2D 对象绘制的路径所形成的图形，或者使用图形上下文对象的 stroke() 方法绘制使用 Path2D() 对象绘制的路径所形成的图形轮廓：
context.fill(path);
context.stroke(path);
<body>
<canvas id="canvas" width="600" height="400"></canvas>
</body>
<script>
var c = document.querySelector('#canvas');
var t = c.getContext('2d');
t.fillStyle = '#eef';
t.fillRect(0, 0, 600, 400);
for (let i = (n = 0); i < 10; i++) {
let p = new Path2D();
p.arc(i * 25, i * 25, i - 10, 0, Math.PI * 2, true);
p.closePath();
t.fillStyle = '#f004';
t.fill(p);
}
</script>
可以使用 Path2D 对象的 addPath() 方法将一个 Path2D 对象代表的路径添加到另一个 Path2D 对象所代表的路径。
path2.addPath(path1);